<script>
	import { cn } from '$lib/utils.js';

	/**
	 * @type {{
	 *   ref?: HTMLElement | null,
	 *   class?: string,
	 *   children?: import('svelte').Snippet,
	 *   [key: string]: any
	 * }}
	 */
	let { ref = $bindable(null), class: className, children, ...restProps } = $props();
</script>

<div data-slot="table-container" class="relative w-full overflow-x-auto">
	<table
		bind:this={ref}
		data-slot="table"
		class={cn('w-full caption-bottom text-sm', className)}
		{...restProps}
	>
		{@render children?.()}
	</table>
</div>
